<!DOCTYPE html>
<html lang="ch">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="UTF-8">
    <title>自我介绍</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .image{
            width: 100vw;
            height: 100vh;
            background-color: #eeeeee;
            display: flex;
        }
        .image div{
            width: 10vw;
            height: 100vh;
            background-size: 1000%;
            background-image: url("http://5b0988e595225.cdn.sohucs.com/images/20190512/df8a22bbf57d45e8acfb4d4ae0eccb8a.jpeg");
            background-repeat: no-repeat;
            background-position: 0 0;
            transform: translateY(-100%);
        }
        .image div:nth-of-type(1){
            background-position: 0 0;
        }
        .image div:nth-of-type(2){
            background-position: -10vw 0;
        }
        .image div:nth-of-type(3){
            background-position: -20vw 0;
        }
        .image div:nth-of-type(4){
            background-position: -30vw 0;
        }
        .image div:nth-of-type(5){
            background-position: -40vw 0;
        }
        .image div:nth-of-type(6){
            background-position: -50vw 0;
        }
        .image div:nth-of-type(7){
            background-position: -60vw 0;
        }
        .image div:nth-of-type(8){
            background-position: -70vw 0;
        }
        .image div:nth-of-type(9){
            background-position: -80vw 0;
        }
        .image div:nth-of-type(10){
            background-position: -90vw 0;
        }
        .image:hover div{
            transform: translateY(0);
        }
        .image:hover div:nth-of-type(1){
            transition: all 0.5s ease-in-out;
        }
        .image:hover div:nth-of-type(2){
            transition: all 0.6s ease-in-out;
        }
        .image:hover div:nth-of-type(3){
            transition: all 0.7s ease-in-out;
        }
        .image:hover div:nth-of-type(4){
            transition: all 0.8s ease-in-out;
        }
        .image:hover div:nth-of-type(5){
            transition: all 0.9s ease-in-out;
        }
        .image:hover div:nth-of-type(6){
            transition: all 1.0s ease-in-out;
        }
        .image:hover div:nth-of-type(7){
            transition: all 1.1s ease-in-out;
        }
        .image:hover div:nth-of-type(8){
            transition: all 1.2s ease-in-out;
        }
        .image:hover div:nth-of-type(9){
            transition: all 1.3s ease-in-out;
        }
        .image:hover div:nth-of-type(10){
            transition: all 1.4s ease-in-out;
        }
    </style>
</head>
<body>

<div class="image">
    <div></div>
    <div>
        <br />
        <br />
        姓名：苏东苗<br />
        年龄：22<br />
        学校：黄河水利职<br />
        课程：linux、<br />
        展望：毕业尽快就
    </div>
    <div>
        <br />
        <br />
        <br />
        <br />
        业技术学院<br />
        photoshop<br />
        职
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>